<template>
	<view class="container">
		<navView navTitle="项目进度" titleColor="#fff" :isBack="true"></navView>
		<view class="topbox">
			<!-- 项目名称区域 -->
			<view class="project-title">{{detail.name}}</view>
			<!-- 动态状态标题 -->
			<view class="status-tag" :class="'status'">{{detail.status_text}}</view>
			<!-- 进度条 -->
			<uni-section title="基本用法" type="line" padding>
				<uni-steps :options="steps" :active="activeIndex" />
			</uni-section>
		</view>
		<view class="content">
			<view class="tite">
				合同编号：{{ detail.num }}
				<!-- 合同签订阶段 -->
			</view>
			<view class="data-statistics">
				<view class="title">
					<view class="tiao"></view>
					合同条款确认
				</view>
				<view class="options">
					{{ detail.content }}
				</view>
			</view>
			<view class="data-statistics">
				<view class="title">
					<view class="tiao"></view>
					节点时间
				</view>
				<view class="times">
					<view class="time">
						<uni-icons type="calendar-filled" color="#8c8c8c" size="40rpx"></uni-icons>
						<view class="right">
							项目开始日期：{{ detail.start_time }}
							<!-- <text class="te1">正常</text>、<text class="te2">即将超期</text>、<text class="te3">超期</text> -->
						</view>
					</view>
					<view class="time">
						<uni-icons type="calendar-filled" color="#8c8c8c" size="40rpx"></uni-icons>
						<view class="right">
							该节点截至日期：{{detail.progress[activeIndex].acc_time || "暂无"}}
						</view>
					</view>
				</view>
			</view>
			<view class="data-statistics" v-if="detail.progress[activeIndex].files">
				<view class="title">
					<view class="tiao"></view>
					文件
				</view>
				<view class="root">
					<view class="list-item" v-for="(item, index) in detail.progress[activeIndex].files" :key="index">
						<image class="file-icon" src="https://hfd.bjlzkj.com/static/list/file.png" />
						<view class="option">
							<view class="file-info">
								<view class="file-title">{{ item.name }}</view>
							</view>
							<view class="action-buttons">
								<button class="download-button" @click="handleDownload(item)">下载</button>
								<button class="view-button" @click="handleView(item)">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="data-statistics" v-if="detail.progress[activeIndex].attachment">
				<view class="title">
					<view class="tiao"></view>
					附件材料
				</view>
				<view class="root">
					<view class="list-item" v-for="(item, index) in detail.progress[activeIndex].attachment"
						:key="index">
						<image class="file-icon" src="https://hfd.bjlzkj.com/static/list/file.png" />
						<view class="option">
							<view class="file-info">
								<view class="file-title">{{ item.name }}</view>
							</view>
							<view class="action-buttons">
								<button class="download-button" @click="handleDownload(item)">下载</button>
								<button class="view-button" @click="handleView(item)">查看</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				steps: [], // 步骤数组
				activeIndex: 0, // 当前激活的步骤索引
				id: '',
				detail: {}
			};
		},
		onLoad(options) {
			this.id = options.id;
		},
		onShow() {
			this.gitState();
		},
		methods: {
			gitState() {
				this.$request('/addons/qingdong/contract/getContractInfo', 'GET', {
					id: this.id
				}).then(res => {
					this.detail = res.data;
					this.updateStepsAndActiveIndex();
				});
			},
			updateStepsAndActiveIndex() {
				if (this.detail.progress) {
					this.steps = this.detail.progress.map(item => ({
						title: item.progress_name,
						// desc: item.acc_time
					}));

					// 找到第一个未完成的步骤
					this.activeIndex = this.detail.progress.findIndex(item => item.is_over !== 1);
					if (this.activeIndex === -1) { // 如果所有的步骤都是已完成的，激活最后一个步骤
						this.activeIndex = this.steps.length - 1;
					}
				}
			},
			handleDownload(item) {
				// 下载逻辑
			},
			handleView(item) {
				// 查看逻辑
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 20px;
	}

	.topbox {
		width: 100%;
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0rpx 2rpx 12rpx 2rpx rgba(97, 97, 97, 0.25);

		.project-title {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
		}

		.status-tag {
			display: block;
			width: fit-content;
			border-radius: 10rpx;
			padding: 6rpx 12rpx;
			font-size: 22rpx;
			margin: 10rpx auto;
			font-weight: bold;
			background-color: rgba(0, 122, 255, 0.1);
			color: #007aff;
		}
	}

	.content {
		.tite {
			font-size: 26rpx;
			color: #333333;
			font-weight: bold;
			line-height: 20rpx;
			margin: 40rpx 0;
		}

		.data-statistics {
			background-color: #ffffff;
			border-radius: 20rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ccc;
				padding: 24rpx 12rpx;

				.tiao {
					width: 6rpx;
					height: 22rpx;
					background: #1B87E8;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 10rpx;
				}
			}

			.times {
				padding: 10rpx 20rpx;

				.uni-icons {
					margin-right: 10rpx;
				}

				.time {
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 24rpx;

					.te1 {
						color: #008EFE;
					}

					.te2 {
						color: #FF8000;
					}

					.te3 {
						color: #FE0022;
					}
				}
			}
		}

		.options {
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			padding: 20rpx;
			box-sizing: border-box;
		}

		.root {
			padding: 0 20rpx;

			.list-item {
				display: flex;
				align-items: center;
				padding: 20px 0;
				position: relative;
				justify-content: space-between;

				&:last-child {
					border: 0;
				}

				.file-icon {
					width: 60px;
					height: 60px;
				}

				.option {
					width: 80%;

					.file-info {
						flex: 1;

						.file-title {
							font-size: 12px;
							font-weight: bold;
							color: #333;
						}

						.file-time {
							font-size: 12px;
							color: #999;
							margin-top: 4px;
						}
					}

					.action-buttons {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						margin-top: 20rpx;

						.download-button {
							width: 158rpx;
							height: 57rpx;
							border-radius: 58rpx 58rpx 58rpx 58rpx;
							border: 4rpx solid #008EFF;
							font-size: 20rpx;
							color: #008EFF;
							background: #fff;
							margin: 0;
						}

						.view-button {
							width: 158rpx;
							height: 57rpx;
							border-radius: 58rpx 58rpx 58rpx 58rpx;
							border: 4rpx solid #008EFF;
							font-size: 20rpx;
							color: #fff;
							background: #008EFF;
							margin: 0;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>